<template>
    <view class="cart-item-specs">
        <view class="item-main">
            <view class="specs" v-if="spaceItem.attribute"
                ><text>规格:</text><text class="specs-text">{{ spaceItem.attribute }}</text></view
            >
            <view class="price"
                ><text class="price-text">￥{{ spaceItem.price }}</text
                ><text>/{{ spaceItem.unitName }}</text></view
            >
        </view>
        <view class="item-right">
            <uni-icons class="item-del" type="trash" v-if="false"></uni-icons>
            <vk-data-input-number-box
                class="input-number-box"
                v-model="spaceItem.amount"
                :min="minBuyNum || 0"
                :step="stepBuyNum || 1"
                :step-strictly="stepStrictly"
                :positive-integer="true"
                @minus="changeAmount(-1, spaceItem)"
                @blur="changeAmount(0, spaceItem)"
                @plus="changeAmount(1, spaceItem)"></vk-data-input-number-box>
        </view>
    </view>
</template>

<script>
import { upTempCartForActivityFn } from "@/utils/tempCartUtil.js"
export default {
    props: {
        spaceItem: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            selectNum: 0,
            stepStrictly: true,
            minBuyNum: 0,
            stepBuyNum: 1,
            maxNum: 999,
        }
    },
    mounted() {},
    methods: {
        changeAmount(type, itemData) {
            itemData.Amount = itemData.amount

            upTempCartForActivityFn(itemData)
        },
    },
}
</script>

<style lang="scss">
.cart-item-specs {
    display: flex;
    flex-direction: row;
    border-bottom: solid 1rpx $uni-bg-color-grey;
    padding: $app-page-padding 0;
    .item-left {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
    }
    .item-main {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-right: 20rpx;
        .specs {
        }
    }
    .item-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        .item-del {
            margin-bottom: 6rpx;
        }
    }
    .price-text {
        color: $color-red;
        font-size: $font-size-30;
    }
}
</style>
